<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地理位置测试</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <script type="text/javascript">
        //百度API demo 测试
        var map;
        //社区救助站坐标
        var value = {};
        value.coords={};
        value.coords.lng = 116.372648;
        value.coords.lat=39.96782;

        var value2 = {};
        value2.coords={};
        value2.coords.lng = 116.388355;
        value2.coords.lat=39.961143;

        function init() {
            //创建地图
            var lng = value.coords.lng;
            var lat = value.coords.lat;
            map = new BMap.Map("map");
            var gpsPoint = new BMap.Point(lng, lat);    // 创建点坐标
            map.centerAndZoom(gpsPoint, 15);
            map.enableScrollWheelZoom();//鼠标滚动放大缩小

            // 添加带有定位的导航控件
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true
            });
            map.addControl(navigationControl);

            //-----------------------------------------------------------------------------------------------------

            //老年人坐标
            var pt = new BMap.Point(value2.coords.lng,value2.coords.lat);
            var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
            var label = new BMap.Label("我摔倒了快救我！",{offset:new BMap.Size(83,-14)});
            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
//            marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            marker2.setLabel(label);
            map.addOverlay(marker2);

            //创建右键菜单
            var markerMenu=new BMap.ContextMenu();
            var txtMenuItem = [
                {
                    text: '呼叫亲属',
                    callback: function () {
                        alert("SOS: 电话呼叫亲属中。。。");
                    }
                },
                {
                    text: '呼叫最近的救护站',
                    callback: function () {
                        alert("SOS: 系统查找最近的救护站中。。。呼叫救护站中。。。");
                    }
                }
            ];
            for(var i=0; i < txtMenuItem.length; i++){
                markerMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
            }
            marker2.addContextMenu(markerMenu);

            //标记
            theLocation(value.coords);


            var pointA = new BMap.Point( 116.339303,40.011602); // 创建点坐标A
            var pointB = new BMap.Point( 116.317744,39.999443 ); // 创建点坐标B
            alert('两点的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //获取两点距离,保留小数点后两位
        }

        // 用经纬度设置地图中心点
        function theLocation(coords){
            var new_point = new BMap.Point(coords.lng,coords.lat);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            var label = new BMap.Label("社区救助站",{offset:new BMap.Size(20,-10)});
            marker.setLabel(label);
        }

        //导航
        function walking() {
            //步行路线导航
            var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            var point1 = new BMap.Point(value2.coords.lng,value2.coords.lat);
            var point2 = new BMap.Point(value.coords.lng,value.coords.lat);
            walking.search(point1,point2);
        }
        window.onload = init;

    </script>
</head>
<body>
<a href="javascript:void(0);" onclick="walking();">开启步行导航</a>
<div id="map" style="width:1000px;height:600px;"></div>
</body>
</html>